<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2020/6/1
  Time: 13:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单详情</title>
    <%@include file="/common/header.jsp"%>
    <style>
        .ll .td1{
            /*width: 200px;*/
            /*height: 60px;*/
            width:100%;
            height: 50px;
            /*word-break:keep-all;!* 不换行 *!*/
            white-space:nowrap;/* 不换行 */
            overflow:hidden;/* 内容超出dao宽度时隐藏超出部分的内容 */
            text-overflow:ellipsis;/* 当对象内文本内溢出时显示容省略标记(...) ；需与overflow:hidden;一 起使用。*/
            padding: 15px;
        }
        .ll td{
            height: 50px;
        }
        .sp{
            margin: 20px 0;
        }
        .ll .tr1 td{ background-color: #F2F6FC;

            height: 30px;
        }
        .td2{
            color: red;
        }
        .bb{
            float: right;
        }
        .img{
            width:200px;
            height:200px;
            background-repeat:no-repeat;
            background-size:cover;
            background-position:center;
        }
    </style>
</head>
<body>
<div id="root" style="border: 1px white solid">
        <i-button type="info" @click="ret" :style="{float:'right',margin:'20px 40px'}">返回订单列表</i-button>

    <div style="width: 80%;margin: 80px auto 0px auto;">
        <Steps :current="${order.status+1}" :style="{width:'95%',margin:'auto'}">
            <Step title="提交订单" content="<fmt:formatDate type="both" value="${order.createTime}" />"></Step>
            <Step title="支付订单" content="<fmt:formatDate type="both" value="${order.paymentTime}" />"></Step>
            <Step title="平台发货" content="<fmt:formatDate type="both" value="${order.deliveryTime}" />"></Step>
            <Step title="确认收货" content="<fmt:formatDate type="both" value="${order.receiveTime}" />"></Step>
            <Step title="完成评价" content="<fmt:formatDate type="both" value="${order.commentTime}" />"></Step>
        </Steps>
        <Modal v-model="modal1" title="发货" @on-ok="handleSubmit('order')">
            <i-Form ref="order" :model="order" :rules="ruleInline" :label-width="100">
                <h3>订单编号：${order.orderSn}</h3>
                <h3>收货人：${order.receiverName}</h3>
                <h3>手机号码：${order.receiverPhone}</h3>
                <h3>邮政编码：${order.receiverPostCode}</h3>
                <h3>收货地址：${order.receiverCity}${order.receiverRegion}${order.receiverDetailAddress}</h3>
                    <Form-Item prop="deliveryCompany" label="配送方式">
                        <i-Select v-model="order.deliveryCompany" style="width:200px">
                            <i-Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
                        </i-Select>
                    </Form-Item>
                    <%--<Form-Item prop="deliverySn" label="物流单号">--%>
                        <%--<i-Input type="text" v-model="order.deliverySn"></i-Input>--%>
                    <%--</Form-Item>--%>
            </i-Form>
        </Modal>
        <Modal  v-model="modaladd"  title="退货详情" @on-ok="dotui" @on-cancel="noupdate">
            <i-form :label-width="80">
                <Form-Item label="退货问题:">
                    <i-Select v-model="returnGoods.returnReasonId" clearable  style="width: 120px;">
                        <i-Option v-for="item in returnList" :value="item.id" :key="item.id">{{ item.returnName }}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item label="退货理由:">
                    <i-input type="textarea" v-model="returnGoods.describ"></i-input>
                </Form-Item>
                <Form-item label="图片证明:">
                    <Upload action="/sys/brand/upload" name="attach" :before-upload="handlerBeforeUpload" :multiple="false" :on-success="uploadSuccess" ref="upload1">
                        <i-Button icon="ios-cloud-upload-outline">上传图片</i-Button>
                    </Upload>
                    <div class="img" :style="{'background-image':'url(' + img +')'}" v-if="img"></div>
                </Form-item>
            </i-form>
        </Modal>
        <Modal  v-model="modalupdate"  title="退货详情" @on-ok="dootui" @on-cancel="noupdate">
            <i-form :label-width="80">
                <Form-Item label="退货问题:">
                    <i-Select v-model="returnGoods.returnReasonId" clearable  style="width: 120px;">
                        <i-Option v-for="item in returnList" :value="item.id" :key="item.id">{{ item.returnName }}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item label="退货理由:">
                    <i-input type="textarea" v-model="returnGoods.describ"></i-input>
                </Form-Item>
                <Form-item label="图片证明:">
                    <Upload action="/sys/brand/upload" name="attach" :before-upload="handlerBeforeUpload" :multiple="false" :on-success="uploadSuccess" ref="upload">
                        <i-Button icon="ios-cloud-upload-outline">上传图片</i-Button>
                    </Upload>
                    <div class="img" :style="{'background-image':'url(' + img +')'}" v-if="img"></div>
                </Form-item>
            </i-form>
        </Modal>
        <Card style="">
            <p slot="title" style="height: 35px">
                <Icon type="ios-alert":style="{color:'red'}" ></Icon>
                <span style="color: red">当前订单状态：{{ ${order.status} === 0 ? '待付款' : (${order.status} === 1 ? '待发货' : (${order.status} === 2 ? '已发货' : (${order.status} === 3 ? '已完成':'已关闭' ))) }}</span>
                <c:if test="${order.status==1}"><i-button class="bb" @click="upmodal">点击发货</i-button></c:if>
                <c:if test="${order.status==4}"><i-button class="bb" @click="del()">删除订单</i-button></c:if>

            </p>
            <div class="sp">
                <Icon type="md-bookmark" ></Icon>基本信息
            </div>
            <div class="ll">
               <table border="1" cellpadding="0" cellspacing="0"  style="margin:auto;padding: 0px;text-align:center;width: 95%;table-layout:fixed;border-color:#DCDFE6; border-collapse: collapse;">
                   <tr class="tr1">
                       <td>订单编号</td>
                       <td>用户账号</td>
                       <td>支付方式</td>
                       <td>订单来源</td>
                       <td>订单类型</td>
                   </tr>
                   <tr>
                       <td>${order.orderSn}</td>
                       <td>${order.memberUsername}</td>
                       <td>{{ ${order.payType} === 0 ? '未支付' : (${order.payType} === 1 ? '支付宝' : '微信') }}</td>
                       <td>{{ ${order.sourceType} === 1 ? 'APP' : 'PC' }}</td>
                       <td>{{${order.orderType} === 0?'正常订单':'秒杀订单'}}</td>
                   </tr>
                   <tr class="tr1">
                       <td>配送方式</td>
                       <td>物流单号</td>
                       <td>订单可得优币</td>
                       <td>订单可得成长值</td>
                       <td>活动信息</td>
                   </tr>
                   <tr>
                       <td>${order.deliveryCompany}</td>
                       <td>${order.deliverySn}</td>
                       <td>${order.growth}</td>
                       <td>${order.growth}</td>
                       <td class="td1">
                           <Poptip content="${order.promotionInfo}" trigger="hover" width="200" word-wrap class="pp">
                               <c:if test="${order.promotionInfo.length()>=11}">
                                   ${order.promotionInfo.substring(0,10)}
                               </c:if>
                               <c:if test="${order.promotionInfo.length()<11}">
                                   ${order.promotionInfo}
                               </c:if>

                           </Poptip>
                       </td>
                   </tr>
               </table>
            </div>
            <div class="sp">
                <Icon type="md-bookmark" ></Icon>收货人信息
            </div>
            <div class="ll">
                <table border="1" cellpadding="0" cellspacing="0"  style="margin:auto;padding: 0px;text-align:center;width: 95%;table-layout:fixed;border-color:#DCDFE6; border-collapse: collapse;">
                    <tr class="tr1">
                        <td>收货人</td>
                        <td>手机号码</td>
                        <td>邮政编码</td>
                        <td>收货地址</td>
                    </tr>
                    <tr>
                        <td>${order.receiverName}</td>
                        <td>${order.receiverPhone}</td>
                        <td>${order.receiverPostCode}</td>
                        <td>
                            ${order.receiverProvince}
                            ${order.receiverCity}
                            ${order.receiverRegion}
                            ${order.receiverDetailAddress}
                        </td>
                    </tr>
                </table>
            </div>
            <div class="sp" >
                <Icon type="md-bookmark" ></Icon>商品信息
            </div>
            <div class="ll" style="overflow:hidden">
                <i-table :columns="columns" :data="data" border stripe  :height="cd" >
                    <template slot-scope="scope" slot="productPic"><img width="100px" height="100px" v-bind:src="scope.row.productPic"></template>
                    <template slot-scope="scope" slot="productSn">价格：{{ scope.row.productPrice }}货号：{{scope.row.productSn}}</template>
                    <template slot-scope="scope" slot="productAttr">
                        {{scope.row.productAttr}}
                        <%--<Select v-model="model1" style="width:200px">--%>
                            <%--<Option v-for="item in scope.row.productAttr" :value="item.value" :key="item.value">{{ item.key }}</Option>--%>
                        <%--</Select>--%>
                    </template>
                    <template slot-scope="scope" slot="status">{{ scope.row.giftGrowth*scope.row.productQuantity }}</template>
                    <c:if test="${order.status==3}">
                        <template slot-scope="{row,index}" slot="tuihuo">
                            <i-button type="default"  @click="tui(row)" style="margin-top: 10px">查看申请</i-button>
                            <i-button type="default"  @click="qu(row)"  style="margin-top: 10px">取消退货</i-button>
                        </template>
                    </c:if>
                    <c:if test="${order.status!=3}">
                        <template slot-scope="{row,index}" slot="tuihuo">
                            <i-button type="default" disabled @click="tui(row)" style="margin-top: 10px">查看申请</i-button>
                            <i-button type="default" disabled @click="qu(row)"  style="margin-top: 10px">取消退货</i-button>
                        </template>
                    </c:if>

                </i-table>
                <div class="sp" style="float: right">合计：<span style="color: red">￥${order.totalAmount}</span></div>
            </div>

            <div class="sp">
                <Icon type="md-bookmark" ></Icon>费用信息
            </div>
            <div class="ll">
                <table border="1" cellpadding="0" cellspacing="0"  style="margin:auto;padding: 0px;text-align:center;width: 95%;table-layout:fixed;border-color:#DCDFE6; border-collapse: collapse;">
                    <tr class="tr1">
                        <td>商品合计</td>
                        <td>运费</td>
                        <td>优惠券</td>
                        <td>积分抵扣</td>
                    </tr>
                    <tr>
                        <td>￥${order.totalAmount}</td>
                        <td>￥${order.freightAmount}</td>
                        <td>-￥${order.couponAmount}</td>
                        <td>-￥${order.integrationAmount}</td>
                    </tr>
                    <tr class="tr1">
                        <td>活动优惠</td>
                        <td>折扣金额</td>
                        <td>订单总金额</td>
                        <td>应付款金额</td>
                    </tr>
                    <tr>
                        <td>-￥${order.promotionAmount}</td>
                        <td>-￥${order.discountAmount}</td>
                        <td class="td2">￥${order.totalAmount+order.freightAmount}</td>
                        <td class="td2">￥${order.payAmount}</td>
                    </tr>
                </table>
            </div>
        </Card>
    </div>

</div>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                {title:"商品图片",slot:"productPic"},
                {title:"商品名称",key:"productName",width:350},
                {title:"价格/货号",slot:"productSn"},
                {title:"属性",slot:"productAttr"},
                {title:"数量",key:"productQuantity",width:80},
                {title:"小计",slot:"status",width:80},
                {title:"模拟退货",slot:"tuihuo"}
            ],
            data:[],
            formInline: {
                user: '',
                password: ''
            },
            modal1:{},
            cd:{},
            order:{},
            modal1:false,
            modaladd:false,
            modalupdate:false,
            img:null,
            returnGoods:{},
            returnList:[],
            returnGoodsOne:[],
            cityList: [
                {
                    value: '顺丰快递',
                    label: '顺丰快递'
                },
                {
                    value: '圆通快递',
                    label: '圆通快递'
                },
                {
                    value: '中通快递',
                    label: '中通快递'
                },
                {
                    value: '韵达快递',
                    label: '韵达快递'
                },
            ],
            ruleInline: {
                deliverySn: [
                    { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                ],
                deliveryCompany: [
                    { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                ],

            }
        },
        mounted(){
            this.getOrderItem();
        },
        methods: {
            ret(){
               window.location.href="/ord/order/index";
            },
            getOrderItem(){
                axios.get("/ord/order/item?orderId=${order.id}").then(
                    ({data})=>{
                        this.data = data.result.list;
                        this.cd = data.result.cd*100+45;

                    }
                )
            },
            upmodal(){
                this.modal1=true;
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.post("ord/order/upItem/${order.id}",this.order).then(
                            ({data})=>{
                                iview.Message.info({content:data.msg});
                                window.location.href="/ord/order/view?id=${order.id}";
                            }
                        )
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            del(){
                iview.Modal.confirm({
                    title:"您确定要删除吗？",
                    content:"此操作是不可逆的",
                    onOk(){
                        axios.get("/ord/order/del?id=${order.id}").then(
                            ({data})=>{
                                iview.Message.success({content:data.msg});
                                window.location.href="/ord/order/index";
                            }
                        )
                    },
                    onCancel(){
                        iview.Message.info("您取消了删除！");
                    }
                })
            },
            tui(row){
                let _this = this;
                axios.post("/ord/apply/returnGoodsOne?orderItem="+row.id)
                    .then(({data})=>{
                        this.returnGoodsOne=data;
                        if(this.returnGoodsOne.state==3){
                            iview.Message.info("已完成退货");
                        }else if(this.returnGoodsOne.state==0){
                                    if(this.returnGoodsOne.cishu==3){
                                        iview.Modal.confirm({
                                            title:"三次申请机会已用完,如果对结果不满意请联系商家",
                                            content:"商家拒绝退货,理由是："+this.returnGoodsOne.remarks,
                                            onOk(){
                                            },
                                            onCancel(){
                                            }
                                        })
                                    }else {
                                        iview.Modal.confirm({
                                            title:"商家拒绝退货,您有还有("+(3-this.returnGoodsOne.cishu)+")次重新申请的机会，是否重新申请退货？",
                                            content:"商家备注："+this.returnGoodsOne.remarks,
                                            onOk(){
                                                _this.clearFiles();
                                                _this.img=null;
                                                _this.returnGoods={};
                                                _this.modalupdate=true;
                                                axios.post("/ord/reason/list").then(
                                                    ({data})=>{
                                                        _this.returnList=data
                                                    }
                                                );
                                                _this.returnGoods.cishu=_this.returnGoodsOne.cishu+1;
                                                _this.returnGoods.orderItemId=row.id;
                                            },
                                            onCancel(){
                                                iview.Message.info("取消")
                                            }
                                        })

                                    }

                        }else if(this.returnGoodsOne.state==4){
                            if(this.returnGoodsOne.cishu==3){
                                iview.Modal.confirm({
                                    title:"三次申请机会已用完,如果对结果不满意请联系商家",
                                    content:"请慎重进行操作",
                                    onOk(){
                                    },
                                    onCancel(){
                                    }
                                })
                            }else {
                                iview.Modal.confirm({
                                    title:"您已取消退货,您有还有("+(3-this.returnGoodsOne.cishu)+")次重新申请的机会，是否重新申请退货？",
                                    content:"请慎重进行操作",
                                    onOk(){
                                        _this.clearFiles();
                                        _this.img=null;
                                        _this.returnGoods={};
                                        _this.modalupdate=true;
                                        axios.post("/ord/reason/list").then(
                                            ({data})=>{
                                                _this.returnList=data
                                            }
                                        );
                                        _this.returnGoods.cishu=_this.returnGoodsOne.cishu+1;
                                        _this.returnGoods.orderItemId=row.id;
                                    },
                                    onCancel(){
                                        iview.Message.info("取消")
                                    }
                                })

                            }
                        }else if(this.returnGoodsOne.state==1){
                            iview.Message.info("请等待商家处理,超过三天可以联系商家进行处理");
                        }else if(this.returnGoodsOne.state==2){
                            iview.Modal.confirm({
                                title:"商家同意退货,请按照原地址将商品寄回，商家确认无误后进行退款",
                                content:"商家备注："+this.returnGoodsOne.remarks+";预退款："+this.returnGoodsOne.refundAmount,
                                onOk(){
                                },
                                onCancel(){
                                }
                            })
                        }else if(this.returnGoodsOne.state==null){
                            iview.Modal.confirm({
                                title:"未申请过退货，是否进行申请！！！",
                                content:"请慎重进行操作",
                                onOk(){
                                    _this.clearFiles1();
                                    _this.img=null;
                                    _this.returnGoods={};
                                    _this.modaladd=true;
                                    axios.post("/ord/reason/list").then(
                                        ({data})=>{
                                            _this.returnList=data
                                        }
                                    );
                                    _this.returnGoods.orderItemId=row.id;
                                    _this.returnGoods.orderId=${order.id};
                                    _this.returnGoods.userCode="${order.memberUsername}";
                                },
                                onCancel(){
                                    iview.Message.info("取消")
                                }
                            })

                        }
                    })
            },

            qu(row){
                let _this = this;
                axios.post("/ord/apply/returnGoodsOne?orderItem="+row.id)
                    .then(({data})=>{
                        this.returnGoodsOne=data;
                        if(this.returnGoodsOne.state==3){
                            alert("已完成退货,如有需要请重新购买");
                        }else if(this.returnGoodsOne.state==0){
                            alert("商家已拒绝退货;如需继续退货请重新申请;若有特殊原因请与商家沟通");
                        }else if(this.returnGoodsOne.state==1){
                            iview.Modal.confirm({
                                title:"取消退货",
                                content:"商家并未处理,如果您取消退货,对商品没有任何影响",
                                onOk(){
                                    _this.returnGoods.orderItemId=row.id;
                                    axios.post("/ord/apply/update222",_this.returnGoods).then(
                                        ({data})=>{
                                            iview.Message.success({content:data.msg});
                                            _this.getOrderItem()
                                        }
                                    )
                                },
                                onCancel(){
                                    iview.Message.info("取消")
                                }
                            })
                        }else if(this.returnGoodsOne.state==2){
                            alert("商家已同意退货，请与商家沟通后取消退货");
                        }else if(this.returnGoodsOne.state==null){
                            alert("您并未退货!!!!");
                        }else if(this.returnGoodsOne.state==4){
                            alert("您以取消退货!!!!");
                        }
                    })
            },
            handlerBeforeUpload(file){
                console.log(file);
                const ct = new FileReader();
                ct.readAsDataURL(file);//读取本地文件
                ct.onloadend=()=>{
                    this.img = ct.result;
                };
                this.clearFiles();
                this.clearFiles1();
            },
            uploadSuccess(response){
                console.log(response);
                iview.Message.success("上传yes");
                this.returnGoods.voucherPicture=response.result.attachPath;
            },
            noupdate(){
                iview.Message.info("已取消");
            },
            dotui(){
                if(this.returnGoods.returnReasonId==null){
                    iview.Message.info("请选择退货问题！！！")
                }else if(this.returnGoods.describ==null){
                    iview.Message.info("请填写具体的退货原因！！！")
                }else {
                    axios.post("/ord/apply/add",this.returnGoods).then(
                        ({data})=>{
                            iview.Message.success({content:data.msg});
                            this.getOrderItem()
                        })
                }
            },
            dootui(){
                if(this.returnGoods.returnReasonId==null){
                    iview.Message.info("请选择退货问题！！！")
                }else if(this.returnGoods.describ==null){
                    iview.Message.info("请填写具体的退货原因！！！")
                }else{
                    axios.post("/ord/apply/update",this.returnGoods).then(
                        ({data})=>{
                            iview.Message.success({content:data.msg});
                            this.getOrderItem()
                        })
                }
            },
            clearFiles() {
                this.$refs['upload'].clearFiles();
            },
            clearFiles1() {
                this.$refs['upload1'].clearFiles();
            }


        }
    })
</script>
</body>
</html>
